import React from 'react'
import { BorderBox8, BorderBox5, DigitalFlop, Decoration6, BorderBox1, PercentPond, CapsuleChart, ScrollBoard, Decoration9 } from '@jiaminghi/data-view-react'
import { Tabs } from 'antd';
import Beike from './component/Beike'
import styles from './index.less'
const { TabPane } = Tabs;
const CrawPage = () => {
    const fullWidth = 300
    const borderGap = 3
    const borderWidth = 3
    const usefulWidth = fullWidth - (borderGap + borderWidth) * 2
    const pieceLength = [0.25, 0.5, 0.25]
    const pieceGap = 3
    const lineDash = pieceLength
        .map(l => [usefulWidth * l, pieceGap])
        .reduce((all, current) => [...all, ...current], [])
    /**
     * 每日进度条
     */
    const config4 = {
        value: 67,
        colors: ['#01c4f9', '#c135ff'],
        lineDash
    }
    /**
     * 每日任务进度
     */
    const data1 = {
        data: [
            {
                name: '58',
                value: 167
            },
            {
                name: '贝壳',
                value: 67
            },
            {
                name: '房星',
                value: 123
            },
            {
                name: '诸葛',
                value: 55
            },
            {
                name: '房天下',
                value: 61
            }
        ]
    }

    /**
     * 数据轮播展示
     */
    const data2 = {
        header: ['url', '名字', '均价'],
        data: [
            ['行1列1', '行1列2', '行1列3'],
            ['行2列1', '行2列2', '行2列3'],
            ['行3列1', '行3列2', '行3列3'],
            ['行4列1', '行4列2', '行4列3'],
            ['行5列1', '行5列2', '行5列3'],
            ['行6列1', '行6列2', '行6列3'],
            ['行7列1', '行7列2', '行7列3'],
            ['行8列1', '行8列2', '行8列3'],
            ['行9列1', '行9列2', '行9列3'],
            ['行10列1', '行10列2', '行10列3']
        ],
        index: true,
        rowNum: 9,
        columnWidth: [50],
        align: ['center']
    }





    /**
     * 翻牌器数据
     */
    const data = {
        config1: {
            number: [102],
            content: '{nt}个'
        },
        config2: {
            number: [123456],
            content: '{nt}个',
            formatter
        },
        config3: {
            number: [123456],
            content: '{nt}个',
        }
    }
    /**
     * 千分位翻牌器所需格式函数
     * @param {} number 
     */
    function formatter(number) {
        const numbers = number.toString().split('').reverse()
        const segs = []

        while (numbers.length) segs.push(numbers.splice(0, 3).join(''))

        return segs.join(',').split('').reverse().join('')
    }
    return (
        <div className={styles.mainBox}>
            <div className={styles.mainLeft}>
                <BorderBox5
                    color={['#1E88A8', '#305A56']}
                    style={{ padding: '15px', width: '900px', height: '250px' }}
                >
                    <div className={styles.title}
                    >
                        <span>每月任务 </span>

                        <Decoration6 style={{ width: '300px', height: '30px' }} />
                    </div>
                    <div className={styles.second}>
                        <div>
                            <p>当前任务数量</p>
                            <DigitalFlop config={data.config1} style={{ width: '200px', height: '50px' }} />
                        </div>
                        <div>
                            <p>本月任务进行时间</p>
                            <DigitalFlop config={data.config2} style={{ width: '200px', height: '50px' }} />
                        </div>
                        <div>
                            <p>本月完成任务数量</p>
                            <DigitalFlop config={data.config3} style={{ width: '200px', height: '50px' }} />
                        </div>
                    </div>

                </BorderBox5>
                <BorderBox1
                    style={{ padding: '15px', width: '750px', height: '250px' }}
                >
                    <div className={styles.boxTwo}>
                        <div className={styles.left}>
                            <div className={styles.titleTwo}>
                                每日任务进度
                            </div>
                            <div>
                                <PercentPond config={config4} style={{ width: '300px', height: '50px' }} />
                            </div>
                        </div>
                        <div className={styles.right}>
                            <CapsuleChart config={data1} style={{ width: '300px', height: '200px', marginRight: '30px', marginTop: '30px' }} />
                        </div>
                    </div>
                    <Decoration9 className={styles.total} style={{ width: '150px', height: '150px' }}>66%</Decoration9>
                </BorderBox1>
                <div>
                    <ScrollBoard config={data2} style={{ width: '900px', height: '430px', marginTop: '30px' }} />
                </div>
            </div>
            <div className={styles.mainRight}>
                <Tabs defaultActiveKey="1" centered tabPosition='bottom'>
                    <TabPane tab="页一" key="1">
                        <div className={styles.rightBox}>
                            <BorderBox8
                                style={{ padding: '15px', width: '330px', height: '452px', marginLeft: '30px' }}
                            >
                                <Beike />
                            </BorderBox8>
                            <BorderBox8
                                style={{ padding: '15px', width: '330px', height: '452px', marginLeft: '10px' }}
                            >
                                <Beike />
                            </BorderBox8>
                            <BorderBox8
                                style={{ padding: '15px', width: '330px', height: '452px', marginLeft: '30px' }}
                            >
                                <Beike />
                            </BorderBox8>
                            <BorderBox8
                                style={{ padding: '15px', width: '330px', height: '452px', marginLeft: '10px' }}
                            >
                                <Beike />
                            </BorderBox8>
                        </div>

                    </TabPane>
                    <TabPane tab="页二" key="2">
                        <div className={styles.rightBox}>
                        <BorderBox8
                            style={{ padding: '15px', width: '330px', height: '452px', marginLeft: '30px' }}
                        >
                            <Beike />
                        </BorderBox8>
                        </div>
                    </TabPane>
                </Tabs>
            </div>
        </div>
    )
}

export default CrawPage;